import { mapState } from 'vuex';
let Logo = {
  timeout: null
};
export default {
  data() {
    return {
      style: 'r1',
      display: 'none'
    };
  },
  mounted() {

    this.animate();
  },
  computed: {
    ...mapState(['gameplay'])

  },
  watch: {
    gameplay(newval, oldval) {
      if (newval) {
        this.display = 'none';
      }
    }
  },
  methods: {
    animate() {


      clearTimeout(Logo.timeout);
      this.style = 'r1';
      this.display = 'none';


      let m = 'r'; // 方向
      let count = 0;

      const set = (func, delay) => {
        if (!func) {
          return;
        }
        Logo.timeout = setTimeout(func, delay);
      };

      const show = func => {
        // 显示
        set(() => {
          this.display = 'block';
          if (func) {
            func();
          }
        }, 150);
      };

      const hide = func => {
        // 隐藏
        set(() => {
          this.display = 'none';
          if (func) {
            func();
          }
        }, 150);
      };

      const eyes = (func, delay1, delay2) => {
        // 龙在眨眼睛
        set(() => {
          this.style = m + 2;
          set(() => {
            this.style = m + 1;
            if (func) {
              func();
            }
          }, delay2);
        }, delay1);
      };

      const run = func => {
        // 开始跑步啦！
        set(() => {
          this.style = m + 4;
          set(() => {
            this.style = m + 3;
            count++;
            if (count === 10 || count === 20 || count === 30) {
              m = m === 'r' ? 'l' : 'r';
            }
            if (count < 40) {
              run(func);
              return;
            }
            this.style = m + 1;
            if (func) {
              set(func, 4000);
            }
          }, 100);
        }, 100);
      };

      const dra = () => {
        count = 0;
        eyes(
          () => {
            eyes(
              () => {
                eyes(
                  () => {
                    this.style = m + 2;
                    run(dra);
                  },
                  150,
                  150
                );
              },
              150,
              150
            );
          },
          1000,
          1500
        );
      };

      show(() => {
        // 忽隐忽现
        // hide(() => {
        // show(() => {
        // hide(() => {
        // show(() => {
        dra(); // 开始运动

        // });
        // });
        // });
        // });
      });
    }
  }
};
